<template>
  <div style="display: flex;justify-content: center">
    <!--  轮播图-->
    <el-carousel :interval="5000">
      <el-carousel-item v-for="(item, key) in photos" :key="key">
        <el-image :src="item" class="carousel-image"></el-image>
      </el-carousel-item>
    </el-carousel>
  </div>

  <!-- 第二行——挂号区 -->
  <el-row :gutter="20" justify="center" style="margin-top: 30px;line-height: 75px">
    <el-col :span="8">
      <el-card shadow="hover" style="padding:0;cursor: auto;height: 260px">
        <template #header>
          <div style="display: flex; align-items: center; height: 25px; ">
            <img width="22px" height="22px" src="@/assets/tip.png" alt="Tip">
            <span style="color: #58a7b4;font-weight:bold;font-size:16px;margin-left: 8px;">温馨提示</span>
          </div>
        </template>
        <div class="reminder-content" >
<!--          <p style="color: #58a7b4;font-weight:bold;font-size:16px;margin-top: 0">温馨提醒</p>-->
          <p>您一共有 <span style="color: #5fb3c1;font-weight: bold;">{{ count }}</span> 个待就诊 / 待检查项目。</p>
          <p>请按时按嘱就诊。</p>
          <p>祝您身体健康，生活愉快。</p>
        </div>
      </el-card>
    </el-col>

    <el-col :span="10">
      <el-row :gutter="20" justify="space-between" >
        <el-col :span="12">
          <el-card shadow="hover" class="reg-exam-cards" @click="router.push({name:'RegisterAppoint'})">
            <el-row style="width: 100%;">
              <el-col :span="11" style="display: flex;align-items: center;justify-content: center;">
                <img width="36px" height="36px" src="@/assets/Calendar-Ok.png">
              </el-col>
              <el-col :span="13" style="font-weight: bold;color: #467985">预约挂号</el-col>
            </el-row>
          </el-card>
        </el-col>
        <el-col :span="12">
          <el-card shadow="hover" class="reg-exam-cards" @click="router.push({name:'RegisterRecord'})">
            <el-row style="width: 100%;">
              <el-col :span="11" style="display: flex;align-items: center;justify-content: center;">
                <img width="36px" height="36px" src="@/assets/records1.png">
              </el-col>
              <el-col :span="13" style="font-weight: bold;color: #467985">挂号记录</el-col>
            </el-row>
          </el-card>
        </el-col>
      </el-row>
      <el-row :gutter="20" justify="space-between" style="margin-top: 28px;">
        <el-col :span="12">
          <el-card shadow="hover" class="reg-exam-cards" @click="router.push({name:'ExamAppoint'})">
            <el-row style="width: 100%;">
              <el-col :span="11" style="display: flex;align-items: center;justify-content: center;">
                <img width="36px" height="36px" src="@/assets/Stethoscope.png">
              </el-col>
              <el-col :span="13" style="font-weight: bold;color: #467985">预约检查</el-col>
            </el-row>
          </el-card>
        </el-col>
        <el-col :span="12">
          <el-card shadow="hover" class="reg-exam-cards" @click="router.push({name:'ExamRecord'})">
            <el-row style="width: 100%;">
              <el-col :span="11" style="display: flex;align-items: center;justify-content: center;">
                <img width="36px" height="36px" src="@/assets/records2.png">
              </el-col>
              <el-col :span="13" style="font-weight: bold;color: #467985">检查记录</el-col>
            </el-row>
          </el-card>
        </el-col>
      </el-row>
    </el-col>

  </el-row>
</template>

<script setup>
import {useRouter} from "vue-router";
import {ref} from "vue";
import patientApi from "@/apis/patient";


const router = useRouter();
const count = ref(0)
const patientInfo = JSON.parse(sessionStorage.getItem('userInfo'))

const getCount = async () =>{
  const data = {
    id:patientInfo.id
  }
  count.value = (await patientApi.getCount(data)).data
}
getCount();

const photos = [
  require("@/assets/HospitalHome.jpg"),
  require("@/assets/HospitalHome.jpg")
]

</script>

<style scoped>
.image{
  width: 75%;
  height: 230px;
}
.el-card:hover{
  cursor: pointer;
}

.el-carousel {
  background-color: rgba(128, 128, 128, 0.05);
  width: 1000px;
  height: 250px;
}

.el-carousel__item {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%; /* 确保轮播项填满高度 */
}

.carousel-image {
  //width: 100%; /* 图片宽度填满轮播项宽度 */
  height: 100%; /* 图片高度填满轮播项高度 */
  object-fit: contain; /* 保持图片比例，图片完全适应容器 */
}

.reminder-content {
  font-size: 15px;
  line-height: 1.8;
}

.reg-exam-cards{
  width: 100%;
  //display: flex;
  align-items: center;
  justify-content: center;
  background-color: rgba(110, 169, 243, 0.05);
  //font-weight: bold;
}

</style>
